<template>
  <ui-page class="container">
    <!-- table -->
    <ui-table v-bind="table.config" ref="table" class="content_container" :params="{tenantId: userInfo.tenantId}"
              @select-change="onSelectTableEntity">
      <!--   查询   -->
      <template v-slot:search-bar>
        <ui-table-select v-model="table.model.select" :reset="true">
          <ui-table-select-item name="employeeId" label="员工编号" placeholder="请输入员工编号" show-label type="number"
                                start-null/>
          <ui-table-select-item name="name" label="姓名" placeholder="请输入姓名" show-label type="text"
                                :show-word-limit="false"/>
          <ui-table-select-item name="departmentId" label="部门" placeholder="请选择部门" show-label type="select"
                                start-null url="/Ent/EntDepartment/selectList" :params="{tenantId: userInfo.tenantId}"
                                :props="{value: 'id', label: 'name'}"/>
          <ui-table-select-item name="clockInStatus" label="上班打卡状态" placeholder="请选择上班打卡状态" show-label
                                :data="checkInStatus" type="select" start-null/>
          <ui-table-select-item name="clockOutStatus" label="下班打卡状态" placeholder="请选择下班打卡状态" show-label
                                :data="checkOutStatus" type="select" start-null/>
          <ui-table-select-item name="clockInTime" label="上班打卡时间" placeholder="请选择上班打卡时间" show-label type="datetime"
                                start-null/>
          <ui-table-select-item name="clockOutTime" label="下班打卡时间" placeholder="请选择下班打卡时间" show-label type="datetime"
                                start-null/>
        </ui-table-select>
      </template>
      <!--   操作   -->
      <template v-slot:tool-bar>
        <el-button type="primary" icon="el-icon-printer" @click="handleEntityExport">导出</el-button>
      </template>
      <ui-table-column label="序号" type="index" width="60px"/>
      <ui-table-column prop="employeeId" label="员工编号"/>
      <ui-table-column prop="entName" label="姓名"/>
      <ui-table-column prop="depName" label="部门"/>
      <ui-table-column prop="clockInTime" label="上班打卡时间"/>
      <ui-table-column prop="clockInStatusText" label="上班打卡状态">
        <template v-slot:default="{row}">
          <span :style="{color: row.clockInStatusText === '上班未打卡' ? 'red'
           : (row.clockInStatusText === '上班正常打卡' ? 'green' : 'orange')}">
            {{ row.clockInStatusText }}
          </span>
        </template>
      </ui-table-column>
      <ui-table-column prop="clockOutTime" label="下班打卡时间"/>
      <ui-table-column prop="clockOutStatusText" label="下班打卡状态">
        <template v-slot:default="{row}">
          <span :style="{color: row.clockOutStatusText === '下班未打卡' ? 'red'
           : (row.clockOutStatusText === '下班正常打卡' ? 'green' : 'orange')}">
            {{ row.clockOutStatusText }}
          </span>
        </template>
      </ui-table-column>
      <!--   分页   -->
      <template v-slot:footer-bar>
        <ui-table-pagination/>
      </template>
    </ui-table>
  </ui-page>
</template>
<script>
import {mapState} from 'vuex';

const AttendanceRecord = {
  API: {
    create: '/Attendance/AttendanceRecord/create',
    update: '/Attendance/AttendanceRecord/update',
    delete: '/Attendance/AttendanceRecord/delete',
    select: '/Attendance/AttendanceRecord/select',
    export: '/Attendance/AttendanceRecord/export',
    createList: '/Attendance/AttendanceRecord/createList',
    updateList: '/Attendance/AttendanceRecord/updateList',
    deleteList: '/Attendance/AttendanceRecord/deleteList',
    selectList: '/Attendance/AttendanceRecord/selectList',
    selectPage: '/Attendance/AttendanceRecord/selectPage',
  },
  data() {
    return {
      api: AttendanceRecord.API,
      table: {
        config: {
          url: AttendanceRecord.API.selectPage,
        },
        model: {
          select: {},
        },
      },
      form: {
        isCreate: true,
        title: '新增',
        url: AttendanceRecord.API.create,
        visible: false,
        detailVisible: false,
        rules: {},
      },
      checkInStatus: [
        {value: 0, label: '上班正常打卡'}, {value: 2, label: '上班补卡'}, {value: 4, label: '上班未打卡'},
        {value: 6, label: '迟到'}, {value: 7, label: '早退'}
      ],
      checkOutStatus: [
        {value: 1, label: '下班正常打卡'}, {value: 3, label: '下班补卡'}, {value: 5, label: '下班未打卡'},
        {value: 6, label: '迟到'}, {value: 7, label: '早退'}
      ],
    };
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    onSelectTableEntity(selects) {
      if (selects.length <= 0) {
        return;
      }
      this.handleEntityUpdateRow(selects[selects.length - 1]);
    },
    handleEntityCreate() {
      this.form.isCreate = true;
      this.$refs.form.resetValues();
      this.form.title = '新增';
      this.form.url = this.api.create;
      this.form.visible = true;
    },
    handleEntityUpdate() {
      const sels = this.$refs.table.getSelection();
      if (sels.length !== 1) {
        this.$message.info('请选择要修改的数据');
        return;
      }
      this.handleEntityUpdateRow(sels[0]);
    },
    handleEntityDelete() {
      const sels = this.$refs.table.getSelection();
      if (sels.length <= 0) {
        this.$message.info('请选择要删除的数据');
        return;
      }
      this.deleteEntities(sels.map(item => item.id)).then(({success}) => {
        if (!success) {
          return;
        }
        this.reloadTable();
      });
    },
    handleEntityUpdateRow(row) {
      this.form.isCreate = false;
      this.form.title = '修改';
      this.form.url = this.api.update;
      this.form.visible = true;

      this.selectEntity(row.id).then(({success, data}) => {
        if (!success) {
          this.form.visible = false;
          return;
        }
        console.log(data)
        this.$refs.form.resetValues(data);
      });
    },
    handleEntityDeleteRow(row) {
      this.deleteEntity(row.id).then(({success}) => {
        if (!success) {
          return;
        }
        this.reloadTable();
      });
    },
    async handleEntityExport() {
      const loading = this.$loading({text: '数据加载中..'});
      const url = this.api.export;
      // await this.$refs.table.exportEntity(url, '导出.xls');
      await this.exportEntity(url, '打卡记录.xls');
      loading.close();
    },
    exportEntity(url, filename) {
      if (!url) {
        console.error(`请指定 export api 请求地址`);
        return;
      }
      const searchParams = this.$refs.table.getSearchParams();
      this.$axios.download(url, filename, {
        params: {...searchParams}
      });
    },
    reloadTable() {
      this.$refs.table && this.$refs.table.reload();
    },
    afterFormSubmit({success}) {
      if (!success) {
        return;
      }
      this.form.visible = false;
      this.reloadTable();
    },
  },
};
export default AttendanceRecord;
</script>
<style lang="less" scoped>
</style>
